<template>
  <div>
    cat，名字：{{ cat.name }}
    <hr>
    cat，年龄：{{ cat.age }}
    <hr>
    <button @click="cat.age++">修改年龄</button>
    <hr>
    血量：{{ blood }}
    <button @click="blood-=2">血量-2</button>
  </div>
</template>

<script setup>
import { reactive, ref, toRaw, watch } from 'vue';

const cat = reactive({
  age:2,
  name:"波斯猫"
})
console.log(cat);
console.log(toRaw(cat));
console.log("===监听数据===");
const blood = ref(100);
watch(blood,(newVal,oldVal)=>{
  console.log("blood改变："+newVal+","+oldVal);
})
</script>

<style lang="scss" scoped>

</style>